<template>
    <div class="zihead">
        <div class="ziheaditem" :class="ishead==0?'ziactive':''" @click="toggleMode(0)">
            <span class="zitit">我的资产</span>
            <span class="xian"></span>
        </div>
        <div class="ziheaditem" :class="ishead==1?'ziactive':''" @click="toggleMode(1)">
            <span class="zitit">投资理财</span>
            <span class="xian"></span>
        </div>
        <div class="ziheaditem" :class="ishead==2?'ziactive':''" @click="toggleMode(2)">
            <span class="zitit">订单中心</span>
            <span class="xian"></span>
        </div>
    </div>
  </template>
  
  <script>
  export default {
    props:{
        ishead: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
        };
    },
    mounted() {
       
    },
    setup() {
    },
    methods:{
        toggleMode(e){
            // this.isheads = e
            if(e == 0){
                this.$router.push({ path: '/propertyHome'})
            }else if(e == 1){
                this.$router.push({ path: '/Invest'})
            }else if(e == 2){
                this.$router.push({ path: '/Order'})
            }
            this.$emit('toggleMode',e)
        }
    }
};
//   import { ref } from 'vue';
//   const ishead = ref('0');
//   const toggleMode = (e) => {
//     ishead.value = e;
//   };
  </script>
  
  <style lang="scss">
  .zihead{
    height: 73px;
    border-bottom: 1px solid  #EEEEEE;
    padding: 0 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .ziheaditem{
        margin-right: 70px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #999999;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .ziheaditem:hover{
        color: #121212;
        cursor: pointer;
    }
    .xian{
        height: 2px;
        background: #030000;
        border-radius: 1px;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        display: none;
    }
    .ziactive{
        font-weight: 500;
        color: #121212;
        .xian{
            display: inline-block;
        }
    }
  }
  </style>